<template>
  <div>
    <el-upload
      class="pdf-uploader"
      :action="actionUrl"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      :on-remove="handleRemove"
      :on-preview="handlePreview"
      :limit="limit"
      :headers="headers"
      :file-list="fileList"
    >
      <el-button v-if="limit > dataList.length" size="small" type="primary">扫描件上传</el-button>
      <div slot="tip" class="el-upload__tip">上传的文件列表↓</div>
    </el-upload>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    value: {
      type: Array,
      default: () => [],
      required: false
    },
    limit: {
      type: Number,
      default: 1,
      required: false
    },
    url: {
      type: String,
      default: 'common/file/upload',
      required: false
    }
  },
  data() {
    return {
      showViewer: false,
      fileList: [],
      dataList: []
    }
  },
  computed: {
    actionUrl: function() {
      return `${process.env.VUE_APP_BASE_API}/${this.url}`
    },
    headers() {
      const token = this.$getXmStorage('XM_COLOR')
      const head = { 'Authorization': `Bearer ${token}` }
      return head
    }
  },
  watch: {
    value: {
      handler(v) {
        this.$nextTick(() => {
          if (v && v.length && v[0].url) {
            this.fileList = v.map(item => ({
              name: item.name || '',
              url: item.url || item.response?.data || ''
            }))
            console.log('this.fileList', this.fileList)
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {},
  methods: {
    beforeUpload(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      if (fileType !== '.pdf' && fileType !== '.doc' && fileType !== '.docx' && fileType !== '.xls' && fileType !== '.xlsx' && fileType !== '.jpg' && fileType !== '.jpeg' && fileType !== '.png' && fileType !== '.bmp' && fileType !== '.gif' && fileType !== '.webp') {
        this.$message.warning('请上传指定格式文件！(仅支持图片格式和pdf、doc、docx、xls、xlsx)')
        return false
      }
      return true
    },
    handleSuccess(response, file, fList) {
      console.log('文件上传成功', response, file, fList)
      if (response.status === 0) {
        if (file.status === 'success') {
          this.dataList = fList.map(v => {
            return v.url || v.response.data
          })
        }
      } else {
        this.$message.warning(response.message)
      }
      this.$emit('update:value', this.dataList)
    },
    handleRemove(file, fList) {
      console.log('文件删除file, fList', file, fList)
      this.dataList = fList.map(v => {
        return v.url || v.response.data
      })
      this.$emit('update:value', this.dataList)
    },
    handlePreview(file) {
      console.log('跳转新页面下载', file)
      window.open(file.url || file.response.data, '_blank')
    },
    handleError(err, file, fList) {
      console.log('文件上传失败', err, file, fList)
    }
  }
}
</script>

<style scoped lang='scss'>
.el-upload__tip{
  font-size: 14px;
  color: #333;
}
</style>
